<template>
	<!-- 设置登录密码 -->
	<view class="center">
		<fui-section marginBottom="80" style="padding: 0;" title="设置密码" size="60" color="#fd5531"></fui-section>
		<fui-form ref="formRef" top="50">
			<!-- 密码 -->
			<fui-input backgroundColor="#F3F9FC" autocomplete="off" radius="20" marginTop="30" placeholder="请输入密码" v-model="formData.password">
				<template v-slot:left>
					<view class="fui-left__icon">
						<fui-icon name="captcha" :size="48" color="var(--fui-color-primary)"></fui-icon>
					</view>
				</template>
				<template #default>
					<view class="fui-left__icon">
						<fui-icon color="var(--fui-color-primary)" :size="50"></fui-icon>
					</view>
				</template>
			</fui-input>


			<fui-input backgroundColor="#F3F9FC" autocomplete="off" radius="20" marginTop="30" placeholder="请再次输入新密码" v-model="formData.password2">
				<template v-slot:left>
					<view class="fui-left__icon">
						<fui-icon name="captcha" :size="48" color="var(--fui-color-primary)"></fui-icon>
					</view>
				</template>
				<template #default>
					<view class="fui-left__icon">
						<fui-icon color="var(--fui-color-primary)" :size="50"></fui-icon>
					</view>
				</template>
			</fui-input>
			<!-- 短信验证码 -->
			<fui-input backgroundColor="#F3F9FC" autocomplete="off" radius="20" marginTop="30" placeholder="验证码" v-model="formData.password2">
				<template v-slot:left>
					<view class="fui-left__icon">
						<fui-icon name="captcha" :size="48" color="var(--fui-color-primary)"></fui-icon>
					</view>
				</template>
				<template #default>
					<view class="fui-left__icon">
						<fui-icon color="var(--fui-color-primary)" :size="50"></fui-icon>
					</view>
				</template>
			</fui-input>

			<!-- 确认修改 -->
			<view style="margin-top: 80rpx;">
				<fui-button text="确认" :margin="['30rpx','0rpx','30rpx','0rpx']" :loading="formItem.loading" bold background="linear-gradient(to right top, #ff6f49, #ff5a5e)"></fui-button>
				<fui-button v-if="formItem.allowSkip" text="跳过" @click="toPage" bold background="linear-gradient(to right top, #ff6f49, #ff5a5e)"></fui-button>
			</view>

		</fui-form>


	</view>
</template>
<script setup>
	import { reactive, ref } from "vue"
	import { useSetPwd } from "@/hooks/useSetPwd"
	const password = ref(true) //密码显示隐藏
	const formRef = ref(null) //表单实例
	//校验规则
	const rules = reactive([{
		name: "code",
		rule: ["required", 'isNumber'],
		msg: ["请输入验证码"]
	}, {
		name: "password",
		rule: ["required"],
		msg: ["请输入密码"]
	}, {
		name: "password2",
		rule: ["required"],
		msg: ["请再次输入密码"],
		validator: [{
			msg: '两次输入密码不一致',
			method: (value) => value != formData.value.password ? false : true
		}]
	}]);
	const { formData, formItem, submit, toPage } = useSetPwd(formRef, rules)
</script>

<style lang="scss" scoped>
	.center {
		box-sizing: border-box;
		width: 100%;
		padding: 60rpx;
		background: var(--fui-bg-color);
		height: 100vh;
	}

	.fui-left__icon {
		padding-right: 24rpx;
	}
</style>